<template>
  <div id="logDetail">
    <el-dialog
      class="about-set"
      title="操作日志详情"
      :visible.sync="dialogData.isShow"
      width="600px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="操作模块：">
            <span
              >{{ ruleForm.title }}
              /
              {{ filterOperType(ruleForm.businessType) }}</span
            >
          </el-form-item>
          <el-form-item label="登录信息：">
            <span>
              {{ ruleForm.operName }}/ {{ ruleForm.deptName }}/
              {{ ruleForm.operIp }}/
              {{ ruleForm.operLocation }}
            </span>
          </el-form-item>
          <el-form-item label="请求地址：">
            <span>{{ ruleForm.operUrl }}</span>
          </el-form-item>
          <el-form-item label="操作方法：">
            <span>{{ ruleForm.method }}</span>
          </el-form-item>
          <el-form-item v-if="ruleForm.operParam" label="请求参数：">
            <div class="code-box">
              <span v-html="formatJSON(ruleForm.operParam)"></span>
            </div>
          </el-form-item>
          <el-form-item label="状态：">
            <span v-if="ruleForm.status === 0" class="tag-span primary"
              >正常</span
            >
            <span v-if="ruleForm.status === 1" class="tag-span danger"
              >异常</span
            >
          </el-form-item>
          <el-form-item v-if="ruleForm.status === 1" label="异常信息：">
            <span>{{ ruleForm.errorMsg }}</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailRequest } from '@/api/system/operLog'
export default {
  name: 'LogDetail',
  msg: '日志管理-详情弹窗',
  props: ['dialogData', 'typeList'],
  data() {
    return {
      ruleForm: {
        title: '',
        businessType: '',
        operName: '',
        deptName: '',
        operIp: '',
        operLocation: '',
        operUrl: '',
        method: '',
        operParam: '',
        status: '',
        errorMsg: ''
      }
    }
  },
  mounted() {
    this.operId = this.dialogData.params
    this.getFormData()
  },
  methods: {
    filterOperType(n) {
      let showText = ''
      this.typeList.forEach((item) => {
        if (n.toString() === item.dictValue) {
          showText = item.dictLabel
        }
      })
      return showText
    },
    /* 编辑时获取表单详情 */
    getFormData() {
      getDetailRequest(
        this.operId,
        (response) => {
          this.ruleForm = { ...response }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.dialogData.isShow = false
      this.dialogData.params = null
    },
    formatJSON(data) {
      var jdata = JSON.stringify(JSON.parse(data), null, 4) // 这时在输出框的json数据确实被格式话了
      return `<pre>${jdata}</pre>`
    }
  }
}
</script>

<style lang="less">
#logDetail {
  .el-form-item__content,
  .el-form-item__label {
    line-height: 22px;
  }
  .code-box {
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px;
  }
  .el-dialog__body {
    min-height: 300px;
    max-height: 600px;
    overflow: auto;
  }
  pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
  }
}
</style>
